<template>
  <view class="padding-sm">
    <view class="app-header">
      <!-- 操作条 -->
      <view class="operation-bar cu-bar bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold">我的用药记录</text>
          <text class="bg-cyan" style="width:2rem"></text>
          <!-- 底部样式 last-child选择器-->
        </view>
      </view>
      <!-- 导航栏 -->
      <nav-bar @fetchDisease="fetchData" :color-class="'text-cyan cur'" ref="navBar"></nav-bar>
    </view>
    <!-- koa用药记录 -->
    <view class="koa-record margin-top-sm">
      <uni-section title="KOA用药记录">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
        <empty-page v-if="!medRecords || !medRecords.koaDrugRecords ||  medRecords.koaDrugRecords.length <= 0"
          container-height="100px" text="无KOA用药记录" />
        <uni-collapse ref="collapse" v-else>
          <uni-collapse-item v-for="item in medRecords.koaDrugRecords" :key="item.id" :title="item.name">
            <view class="content padding-left padding-bottom padding-right">
              <view class="content-container">
                <text class="text-title">药品名称：</text>
                <view v-if="item.drugName" class='content cu-tag light bg-blue' :key="index"
                  v-for="(drugTag, index) in item.drugName.split('/')">
                  {{drugTag}}
                </view>
              </view>
              <view class="content-container">
                <text class="text-title">药品种类：</text>
                <text class="text-content">{{item.drugType}} </text>
              </view>
              <view class="content-container">
                <text class="text-title">使用方法：</text>
                <text class="text-content">{{item.drugUsage}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">使用时间：</text>
                <text class="text-content">{{item.startTime + ' 至 ' + item.endTime}}</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>

      </uni-section>
    </view>

    <!-- 治疗用药记录 -->
    <view class="treatment-record">
      <uni-section title="治疗用药记录">
        <template v-slot:decoration>
          <view class="decoration"></view>
        </template>
        <empty-page v-if="!medRecords || !medRecords.drugRecords || medRecords.drugRecords.length <= 0"
          container-height="100px" text="无治疗用药记录" />
        <uni-collapse ref="collapse" v-else>
          <uni-collapse-item v-for="item in medRecords.drugRecords" :key="item.id" :title="item.name">
            <view class="content padding-left padding-bottom padding-right">
              <view class="content-container">
                <text class="text-title">药品名称：</text>
                <view v-if="item.drugName" class='content cu-tag light bg-blue' :key="index"
                  v-for="(drugTag, index) in item.drugName.split('/')">
                  {{drugTag}}
                </view>
              </view>
              <view class="content-container">
                <text class="text-title">药品种类：</text>
                <text class="text-content">{{item.drugType}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">使用方法：</text>
                <text class="text-content">{{item.drugUsage}}</text>
              </view>
              <view class="content-container">
                <text class="text-title">使用时间：</text>
                <text class="text-content">{{item.startTime + ' 至 ' + item.endTime}}</text>
              </view>
            </view>
          </uni-collapse-item>
        </uni-collapse>
      </uni-section>
    </view>
    <view style="height: 20px;"></view>


  </view>
</template>

<script>
  export default {
    mounted() {
      // 先获取到navList
      this.$nextTick(() => {
        this.$refs.navBar.fetchNav();
      });
    },

    data() {
      return {
        value: '',
        medRecords: [],
        isLoading: false
      }
    },
    methods: {
      // 下拉重载方法
      onPullDownRefresh() {
        // 重新加载数据
        this.fetchData();
      },
      async fetchData(basicId) {
        this.isLoading = true;
        const {
          data: res
        } = await uni.$http.get(`/info/medHistory/${basicId}`)
        if (res.code !== 200) return uni.$showMsg()
        this.medRecords = res.data;
        this.isLoading = false;
      }
    },
  }
</script>

<style lang="scss">
  .app-header {
    margin-bottom: 20px;
    border-radius: 5px;
    padding: 5px;
    height: 110px;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 999;
  }

  .koa-record {
    position: relative;
  }

  .treatment-record {
    position: relative;
    margin-top: 20px;
  }

  .content {
    .content-container {
      .text-title {
        font-size: 13px;
        color: #333;
        margin-right: 5px;
      }

      .text-content {
        font-size: 13px;
        color: #666;
      }
    }

  }

  .decoration {
    width: 6px;
    height: 6px;
    margin-right: 4px;
    border-radius: 50%;
    background-color: #1cbbb4;
  }
</style>